Color system 顏色系統
工具：
Material Theme Builder plugin顏色生成器
M3 Design KitM3 設計套件。
Visualizing dynamic color in your app with Material Design動態顏色系統
https://www.figma.com/community/file/1248805263844976008Build a Material color scheme構建 Material 配色方案
https://www.figma.com/community/plugin/1227923985322908257/hct-color-pickerHTC figma color picker
Dynamic Color 動態顏色
Material You 讓 UI 顏色能根據桌布等自動調整，實現個性化。系統會從主色提取並生成其他配色。
Baseline color 基線顏色
基線配色方案不會動態變化
- Primary（主色）
- On Primary（主色上的文字顏色）
- Primary Container（主色容器）
- On Primary Container（主色容器上的文字顏色）
色彩轉換（Color Transformations）
其中展示了 色相旋轉（Hue Rotation），即如何調整顏色的色相角度，使其在色環上偏移，以適應不同的 UI 需求。這有助於建立更加一致和協調的視覺體驗。
動態顏色
具有動態顏色的產品可以自動為使用者介面（UI）中的每個元素生成並分配顏色，這提供了：
- 個性化使用者介面
- 無障礙對比度
- 使用者可控制的對比度
- 自動深色主題
How the system works 顏色系統的運作原理
1 想象一下每個 UI 元素都被賦予一個編號（Number）。每個編號對應一個特定顏色，形成可控的色彩系統。
2 你可以為每個“數字”手動挑選一種顏色，以建立一個靜態配色方案。靜態顏色是精心挑選的，就行這個綠色一樣
3 從單一來源為每個“數字”利用 Material 的動態色彩系統動態生成一整套易訪問的顏色調色盤。此來源可以是使用者的桌布，也可以是應用內的影象等內容。如果來源發生變化，產品顏色會隨之更新以匹配。
4 你可以透過以下方式自定義動態顏色在產品中的呈現效果
- 設定顏色來源（如桌布或應用內容）。
- 新增靜態或和諧色彩，確保 UI 視覺一致性。
- 調整元素的編號對映，改變顏色分配方式。
Essential Terms 顏色系統關鍵術語
1. 顏色角色（Color Role）
顏色角色分配給特定的 UI 元素，使用主要色、主要色之上、主要容器等語義名稱和對應的顏色標記。
2. 動態顏色（Dynamic Color）
從使用者桌布或應用內容提取顏色，並自動生成 UI 配色方案。當桌布或內容變更時，UI 顏色會自動調整。
3. 靜態顏色（Static Color）
固定不變，不隨使用者環境變化。可手動選擇，或透過 Material Theme Builder 生成。一旦分配給顏色角色和 UI 元素，顏色不會改變。
4. 基礎靜態顏色（Baseline Static Color）
Material 產品的預設靜態配色方案,動態顏色處理是自動化的，使用一種源顏色生五種關鍵顏色，用於製作色調調色盤，然後講調色盤中的顏色分配個顏色角色，顏色角色又會被分配給使用者介面的各個元素
5. 動態顏色生成流程
系統從單個顏色源（如桌布）提取五個關鍵色，再生成完整的色調調色盤。這些色調被分配到不同的顏色角色，並應用於 UI 元素。
系統會利用來自桌布和應用內容等影象生成動態配色方案。
How Dynamic Color Generates Color Schemes 生成動態配色方案的流程
選擇源色
動態顏色系統的基礎是一個源色，可透過以下三種方式獲取：
A. 桌布生成：從使用者桌布提取顏色，經過量化分析，選定單一顏色作為源色。
B. 應用內內容：從縮圖、圖片、影片預覽等內容中提取顏色。
C. 手動選擇：設計師直接挑選顏色，例如Material 設計系統的基礎靜態配色。
2. 送入演算法處理
Material 設計系統使用 顏色演算法Material Color Utilities來處理顏色，並生成完整配色方案。
常見的演算法包括：
1 使用者生成顏色演算法：將使用者選擇的源色轉化為完整配色方案。
2 內容基色演算法：匹配應用內圖片主色，同時保持對比度。
3 自定義顏色演算法：適用於品牌色，確保符合品牌調性。
3. 生成關鍵色
演算法會對源色進行調整，生成五種關鍵色：
- Primary（主色）
- Secondary（次要色）
- Tertiary（輔助色）
- Neutral（中性色）
- Neutral Variant（中性色變體）
4. 建立色調調色盤
系統會對色調（Tone）和色度（Chroma）進行調整，為每種關鍵色建立完整的色調梯度。顏色範圍從 10（最深色）到 100（最淺色），還包括 95、98 和 99。有些調色盤會包含更多的值。，形成更精細的色彩過渡。色調越小顏色越深。
5. 該演算法為色彩角色分配色調。
該演算法利用易獲取的色彩關係，為淺色和深色主題中的 26 種色彩角色指定特定色調。
例如，主要角色使用色調 primary40，而"懸停於主要角色之上"狀態使用 primary100（按鈕和按鈕上的白字）
在亮色和深色主題中使用相同的顏色角色
6. 把顏色顏色應用到 UI上
26 種標準顏色角色被預設到 UI 元素。當源色更改時，UI 顏色會自動更新，確保適應使用者個性化需求。
Color Roles & Contrast Levels 顏色角色支援三種對比度級別
1. 對比度級別
除了亮色和暗色主題，Material 設計系統的顏色角色還支援三種對比度，以適應不同的視覺需求：
- 標準（Standard，預設）
- 中等（Medium）
- 高對比度（High）
2. 詳細對比度說明
| 對比度級別 | 特點 | 適用場景 |
| 標準（Standard） | 使用高低對比度元素混合，減少視覺負擔 | 適合大多數使用者，預設配色 |
| 中等（Medium） | 對比度比率 3:1，增強可讀性，同時避免高對比導致的視覺疲勞 | 適用於需要更高可讀性的使用者 |
| 高對比度（High） | 對比度比率 7:1，突出重點元素，減少視覺干擾 | 適用於視覺障礙使用者，增強焦點內容 |
自動適配：對比度設定適用於亮色和暗色主題，無需額外調整。
3. 顏色角色如何應用
自定義元件可透過 Material 顏色角色支援不同對比度。圖中顏色差異源於對比度級別不同，Material Design 的動態色彩調整會自動適配。
圖1 系統會根據白天/夜晚模式自動調整顏色。圖2 視覺障礙使用者可啟用高對比度模式，系統會自動增強對比度。
Pairing Accessible Tones 可訪問色調搭配
系統透過色調（Tone）、色度（Chroma）和色相（Hue）建立完整的色調調色盤（範圍從 0 到 100）。深色值更小（0 = 黑色），淺色值更大（100 = 白色），色調決定了顏色的亮度。
Material 系統的顏色演算法使用調色盤匹配對比色，確保符合可訪問性標準。系統根據色調的深淺定義無障礙顏色關係，並內建於演算法中。
預設狀態：按鈕容器使用深色調，標籤使用淺色調，以達到3:1的對比度。
主動調節對比度：演算法會分配相距更遠的色調來增強對比度，達到 7:1 的標準，從而實現使用者可控的對比度設定。
Hue, Chroma, Tone - HCT 顏色的 HCT 模型
Material 3 採用 HCT（Hue, Chroma, Tone）顏色模型
因為它比傳統的 HSL/HSV 更貼近人眼的感知方式。
1 色相（Hue）
色相表示顏色的基本屬性（如紅、橙、黃等），用0-360度表示，構成一個迴圈（0度和360度相同）
2 色度（Chroma）
色度表示顏色的鮮豔或中性程度（灰色、黑色或白色），數值從 0（完全中性）到約 120（HCT 模型中最鮮豔）。
3 色調（Tone）
色調錶示顏色的明暗程度（也稱亮度），用0（純黑）到100（純白）的數值表示。色調決定了對比度 - 色調差異越大，對比度越高，反之亦然。
